<template>
  <div class="">
    <TopView />
  <div class="details-container"> 
    <div id="top-zhibo">
      <span>首页 >> 课程详情</span>
    </div>
    

    <div id="container">
      <div id="container-top">
        <div id="con-top-left">
          <img :src="item.bannerFileUrl" alt="课程封面" style="width:100%; height:100%; margin-top:10px;">
        </div>
        
        <div id="con-top-middle">
          <div id="con-title">{{ item.courseTitle }}</div>
          <div id="con-total">
            <ul>
              <li>累计{{ item.participationsCount }}人学习</li>
             
            </ul>
          </div>
          <div id="con-price">
            <span>{{ item.isFree ? '免费' : `¥${item.coursePrice}` }}</span>
          </div>
          <div id="con-button">
            <button id="con-bt1">立即观看</button>
            <button id="con-bt2">加入购物车</button>
          </div>
        </div>
        
        <div id="con-top-right">
          <img src="" alt="收藏图标">
          <div>收藏</div>
        </div>
      </div>
    </div>
    
    <!-- 切换选项卡 -->
    <div id="section-title">
      <span 
        :class="{ active: activeTab === 'description' }"
        @click="changeTab('description')"
      >课程描述</span>
      
      <span 
        :class="{ active: activeTab === 'content' }"
        @click="changeTab('content')"
      >课程目录</span>
      
      <span 
        :class="{ active: activeTab === 'comments' }"
        @click="changeTab('comments')"
      >评论</span>
    </div>


    <div id="section-content">
      <!-- 课程描述 -->
      <transition name="fade" mode="out-in">
        <div 
          v-if="activeTab === 'description'"
          class="tab-content description-content"
          v-html="item.courseDetail"
        ></div>
      </transition>
      
      <!-- 课程目录 -->
      <transition name="fade" mode="out-in">
        <div 
          v-if="activeTab === 'content'"
          class="tab-content content-list"
        >
          <div v-for="(section, index) in item.sections" :key="section.sectionId" class="section-group">
            <h2 class="section-title">{{ section.sectionName }}</h2>
            <div 
              class="subsection-item" 
              v-for="(subSection, subIndex) in section.subSections" 
              :key="subSection.sectionId"
            >
              <span class="subsection-number">{{ index+1 }}.{{ subIndex+1 }}</span>
              {{ subSection.sectionName }}
            </div>
          </div>
        </div>
      </transition>
      
      <!-- 评论 -->
      <transition name="fade" mode="out-in">
        <div 
          v-if="activeTab === 'comments'"
          class="tab-content comments-wrapper"
        >
          <div class="comments-list">
            <div class="comment-item">
              <img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJ9POWIJGVfZ6k634ic0JUfdtax0nabUicicugCkPvLVGeRmf4iaXy4P9ia37lcE6PRtMwMOwKyicr0GH7g/132" alt="用户头像" class="avatar">
              <span class="username">天亮</span>
              <p class="comment-text">操作很方便</p>
              <div class="comment-rating">
                <span class="star filled">★</span>
                <span class="star filled">★</span>
                <span class="star filled">★</span>
                <span class="star filled">★</span>
                <span class="star filled">★</span>
              </div>
              <div class="comment-meta">
                <span class="date">2024-09-03 20:51</span>
                <a class="reply-link">回复</a>
              </div>
            </div>
            
            <div class="comment-item">
              <img src="https://oos-hazz.ctyunapi.cn/online-course/userAvatar/4178/fuguzhongguofengtuzihongsexiqingtuanyuanwenyi-chuang-32427461_1-1623859428434378752.jpg" alt="用户头像" class="avatar">
              <span class="username">yww</span>
              <p class="comment-text">不错呦</p>
              <div class="comment-rating">
                <span class="star filled">★</span>
                <span class="star filled">★</span>
                <span class="star filled">★</span>
                <span class="star filled">★</span>
                <span class="star filled">★</span>
              </div>
              <div class="comment-meta">
                <span class="date">2024-09-03 15:36</span>
                <a class="reply-link">回复</a>
              </div>
            </div>
          </div>

          <div class="pagination">
            <button class="page-btn prev" @click="prevPage">&lt;</button>
            <button class="page-btn" @click="changePage(1)">1</button>
            <button class="page-btn next" @click="nextPage">&gt;</button>
          </div>
        </div>
      </transition>
    </div>  
  </div>
  
    <FooterView />
</div>
</template>

<script>
import { getCourseDetail } from "@/api/request.js";
import TopView from "@/components/topView.vue"
import FooterView from "@/components/footerView.vue"
export default {
  name: 'CourseDetail',
  data() {
    return {
      courseId: null,
      item: {
        sections: [], 
        subSections: []
      },
      activeTab: 'description',
      currentPage: 1
    };
  },
  created() {
    this.courseId = this.$route.query.id;
    this.fetchCourseDetail();
  },
  components : {
    TopView,
    FooterView, 
  },
  methods: {
    async fetchCourseDetail() {
      try {
        const response = await getCourseDetail(this.courseId);
        if (response.code === 0) {
          this.item = response.data;
          
         
          if (this.item.bannerFileUrl) {
            const imgUrl = this.item.bannerFileUrl.split('/');
            this.item.bannerFileUrl = `https://oos-hazz.ctyunapi.cn/online-course/${imgUrl[imgUrl.length-1]}`;
          }
          
          
          if (!this.item.sections) {
            this.item.sections = [];
          }
        }
      } catch (error) {
        console.error('获取课程详情失败:', error);
      }
    },
    
    changeTab(tab) {
      this.activeTab = tab;
    
    },
    
    changePage(page) {
      this.currentPage = page;
   
    },
    
    prevPage() {
      if (this.currentPage > 1) {
        this.changePage(this.currentPage - 1);
      }
    },
    
    nextPage() {
 
      this.changePage(this.currentPage + 1);
    }
  }
};
</script>

<style lang="scss" scoped>

.details-container {
 width: 1200px;
  margin: 0 auto;
}


#top-zhibo {
  height: 100px;
  background-color: #4683ff;
  display: flex;
  align-items: center;
  padding-left: 20px;
  margin-top: 30px;
  
  span {
    color: #fff;
    font-size: 15px;
    margin-top: 30px;
  }
}


#container-top {
  width: 1100px;
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: -20px auto;
  position: relative;
  z-index: 1;
  
  #con-top-left {
    width: 330px;
    height: 220px;
    overflow: hidden;
    border-radius: 4px;
    
    img {
      object-fit: cover;
    }
  }
  
  #con-top-middle {
    flex: 1;
    padding: 0 20px;
    
    #con-title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
    
    #con-total {
      color: #666;
      font-size: 14px;
      margin-bottom: 15px;
      
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        
        li {
          display: inline-block;
          margin-right: 15px;
        }
      }
    }
    
    #con-price {
      font-size: 28px;
      color: #ff6b6b;
      margin: 20px 0;
      
      span {
        font-weight: bold;
      }
    }
    
    #con-button {
      display: flex;
      gap: 15px;
      
      button {
        padding: 10px 25px;
        border-radius: 20px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        border: none;
        outline: none;
        
        &#con-bt1 {
          background: #00cf8c;
          color: white;
          
          &:hover {
            background: darken(#00cf8c, 10%);
          }
        }
        
        &#con-bt2 {
          background: #ffe9e9;
          color: #f1534b;
          
          &:hover {
            background: darken(#ffe9e9, 5%);
          }
        }
      }
    }
  }
  
  #con-top-right {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    
    img {
      width: 24px;
      height: 24px;
    }
    
    div {
      margin-top: 8px;
      color: #666;
      font-size: 14px;
    }
    
    &:hover {
      color: #ff6b6b;
      
      div {
        color: #ff6b6b;
      }
    }
  }
}


#section-title {
  width: 1100px;
  display: flex;
  border-bottom: 1px solid #eee;
  margin: 40px auto 0 auto;
  padding: 0 20px;
  background-color: white;
  span {
    padding: 15px 25px;
    cursor: pointer;
    position: relative;
    color: #666;
    font-size: 16px;
    transition: all 0.3s;
    margin: 0 auto;
    &:hover {
      color: #00cf8c;
    }
    
    &.active {
      color: #00cf8c;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 3px;
        background: #00cf8c;
      }
    }
  }
}


#section-content {
  width: 1100px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
  
  .tab-content {
    min-height: 300px;
  }
  
 .description-content {
    line-height: 1.8;
    color: #333;
    
    ::v-deep img {
      max-width: 100%;
      height: auto;
    }
  }
  
 
  .content-list {
    .section-group {
      margin-bottom: 25px;
      
      .section-title {
        font-size: 18px;
        color: #333;
        padding-bottom: 8px;
        border-bottom: 1px dashed #eee;
        margin-bottom: 15px;
      }
      
      .subsection-item {
        padding: 12px 15px;
        background: #f9f9f9;
        margin-bottom: 8px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        transition: all 0.3s;
        
        &:hover {
          background: #f0f0f0;
          transform: translateX(5px);
        }
        
        .subsection-number {
          color: #00cf8c;
          margin-right: 10px;
          font-weight: bold;
        }
      }
    }
  }
  

  .comments-wrapper {
    .comments-list {
      .comment-item {
        padding: 20px 0;
        border-bottom: 1px solid #eee;
        
        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          vertical-align: middle;
          margin-right: 15px;
        }
        
        .username {
          font-weight: bold;
          color: #333;
          vertical-align: middle;
        }
        
        .comment-text {
          margin: 10px 0 10px 55px;
          color: #333;
          line-height: 1.6;
        }
        
        .comment-rating {
          margin-left: 55px;
          
          .star {
            color: #ffcc00;
            font-size: 16px;
            margin-right: 2px;
          }
        }
        
        .comment-meta {
          margin-left: 55px;
          font-size: 12px;
          color: #999;
          
          .reply-link {
            margin-left: 15px;
            color: #4683ff;
            cursor: pointer;
          }
        }
      }
    }
    
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      
      .page-btn {
        width: 36px;
        height: 36px;
        border: 1px solid #ddd;
        background: #fff;
        margin: 0 5px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
          border-color: #00cf8c;
          color: #00cf8c;
        }
        
        &.active {
          background: #00cf8c;
          color: white;
          border-color: #00cf8c;
        }
      }
    }
  }
}


.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}


@media (max-width: 768px) {
  #container-top {
    flex-direction: column;
    
    #con-top-left {
      width: 100%;
      height: auto;
      margin-bottom: 20px;
    }
    
    #con-top-middle {
      padding: 0;
    }
    
    #con-top-right {
      margin-top: 20px;
      width: 100%;
      flex-direction: row;
      justify-content: center;
      
      img {
        margin-right: 8px;
      }
    }
  }
  
  #section-title {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
    
    span {
      padding: 10px 15px;
    }
  }
}
</style>